<template>
	<view>
		<view class="install-container" style="margin-bottom: 30rpx;">
		
			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params['小餐饮店']" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item label="照片上传" name="照片上传">
					<uploader :max="1" v-model="params['小餐饮店']['照片上传']" />
				</uni-forms-item>
				<uni-forms-item required label="餐饮店名：" name="餐饮店名称">
					<input :disabled="isNoEdit" maxlength="50" placeholder="请输入餐饮店名" v-model="params['小餐饮店']['餐饮店名称']" @input="binddata('餐饮店名称',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="社会信用代码：" name="统一社会信用代码">
					<input :disabled="isNoEdit" maxlength="18" v-model="params['小餐饮店']['统一社会信用代码']" placeholder="请输入社会信用代码" @input="binddata('统一社会信用代码',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="经营者姓名：" name="负责人">
					<input :disabled="isNoEdit" maxlength="18" v-model="params['小餐饮店']['负责人']" placeholder="请输入经营者姓名" @input="binddata('负责人',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="联系电话：" name="联系电话">
					<input :disabled="isNoEdit" maxlength="18" v-model="params['小餐饮店']['联系电话']" placeholder="请输入联系电话" @input="binddata('联系电话',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="房东姓名：" name="房东姓名">
					<input :disabled="isNoEdit" maxlength="50" placeholder="请输入房东姓名" v-model="params['小餐饮店']['房东姓名']" @input="binddata('房东姓名',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="房东电话：" name="房东电话">
					<input :disabled="isNoEdit" maxlength="18" placeholder="请输入房东电话" v-model="params['小餐饮店']['房东电话']" @input="binddata('房东电话',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="店铺地址：" name="地址">
					<choose-address :disabled="isNoEdit" @location="getLocation" placeholder="请输入企业地址" v-model="params['小餐饮店']['地址']" @input="binddata('地址',$event)"></choose-address>
				</uni-forms-item>
				<uni-forms-item required name="消防重点关注对象" label="消防重点对象：">
					<uni-data-checkbox v-model="params['小餐饮店']['消防重点关注对象']" :localdata="status"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required name="是否有健康证" label="是否有健康证：">
					<uni-data-checkbox v-model="params['小餐饮店']['是否有健康证']" :localdata="status1"></uni-data-checkbox>
				</uni-forms-item>
				<!-- <uni-forms-item v-show="params['小餐饮店']['是否有健康证'] == '1'" required name="健康证编号" label="健康证编号：">
					<view>
						<view class="num-add-btn" @click="showModal = true">查看详情</view>
					</view>
				</uni-forms-item> -->
				<uni-forms-item required name="是否有油烟净化" label="是否有油烟净化：">
					<uni-data-checkbox v-model="params['小餐饮店']['是否有油烟净化']" :localdata="status1"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required name="是否住人" label="是否住人：">
					<uni-data-checkbox v-model="params['小餐饮店']['是否住人']" :localdata="roomStatus"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required label="资质有效期开始" name="资质有效期开始时间">
					<date-picker placeHolder="经营资质有效期开始时间" v-model="params['小餐饮店']['资质有效期开始时间']" @input="binddata('资质有效期开始时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item required label="资质有效期结束" name="资质有效期结束时间">
					<date-picker placeHolder="经营资质有效期结束时间" v-model="params['小餐饮店']['资质有效期结束时间']" @input="binddata('资质有效期结束时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item label="营业执照照片" name="营业执照照片">
					<upload :max="1" v-model="params['小餐饮店']['营业执照照片']" />
				</uni-forms-item>
				<uni-forms-item label="安全责任书" name="安全生产责任书">
					<upload :max="1" v-model="params['小餐饮店']['安全生产责任书']" />
				</uni-forms-item>
				<uni-forms-item label="经营类型：" name="经营项目">
					<input maxlength="50" placeholder="请输入经营类型 例如：食品" v-model="params['小餐饮店']['经营项目']">
				</uni-forms-item>
				<uni-forms-item label="成立时间：" name="成立时间">
					<date-picker :disabled="isNoEdit" placeHolder="请填写成立时间" v-model="params['小餐饮店']['成立时间']"></date-picker>
				</uni-forms-item>
				<!-- <uni-forms-item label="店铺面积：">
					<input maxlength="50" placeholder="请输入店铺面积" v-model="params['']">
				</uni-forms-item> -->
				<uni-forms-item label="从业人员数量：" name="从业人员数">
					<input :disabled="isNoEdit" type="number" maxlength="18" placeholder="请输入从业人员数量"  v-model="params['小餐饮店']['从业人员数']">
				</uni-forms-item>
				<uni-forms-item label="备注信息：" name="备注">
					<input :disabled="isNoEdit" maxlength="50" placeholder="请填写备注信息" v-model="params['小餐饮店']['备注']">
				</uni-forms-item>
				<uni-forms-item>
					<facility-info :hydrantList="hydrantList" 
					:annihilatorList="annihilatorList"
					:smokeList="smokeList"
					:gasTankList="gasTankList" 
					:temperateList="temperateList"
					:hydrantLength="hydrantLength"
					:annihilatorLength="annihilatorLength"
					:smokeLength="smokeLength"
					:gasTankLength="gasTankLength" 
					:temperateLength="temperateLength"
					:isShowAdd="!isNoEdit"
					:isShowDelete="!isNoEdit"
					@more="goMoreInstall" @edit="goEdit" @delete="onDelete" :installList="installList" @add="goAddInstall"></facility-info>
				</uni-forms-item>
				<button class="grid-btn" @click="submitForm">提交</button>
			</uni-forms>
		</view>
		<!-- 模态框 -->
		<van-dialog use-slot title="健康证" cancel-button-text="关闭" :before-close="handleClose" :show="showModal" show-cancel-button>
			<view class="dialog-content">
				<view>请输入证件号:</view>
				<view class="num-box">
					<view class="num-item" v-for="(item, index) in params['小餐饮店']['健康证编号']" :key="index">
						<text>{{item}}</text>
						<text class="delete" @click="deleteNum(index)">删除</text>
					</view>
				</view>
				<view class="input-box">
					<input v-model="numItem" type="text" value="" />
					<view class="add-btn" @click="addNumber">添加</view>
				</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import upload from '../components/upload.vue'
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import FacilityInfo from '../components/facilityInfo.vue'
	import ChooseAddress from '../myComponents/chooseAddress.vue'
	import dayjs from 'dayjs'
	import { mapState } from 'vuex'
	var that;
	export default {
		components: {
			upload,
			uploader,
			DatePicker,
			LbPicker,
			FacilityInfo,
			ChooseAddress
		},
		data() {
			return {
				numItem: '',
				showModal: false,
				isNoEdit: false,
				hydrantList: [],
				hydrantLength: 0,
				annihilatorList: [],
				annihilatorLength: 0,
				smokeList: [],
				smokeLength: 0,
				temperateList: [],
				temperateLength: 0,
				gasTankList: [],
				gasTankLength: 0,
				label: '请选择企业登记类型',
				installTypeList: this.$type.installTypeList,
				params: {
					所属网格id: null,
					lagitude: null,
					longitude: null,
					检查点类型: 'restaurant',
					小餐饮店: {
						餐饮店名称: null,	
						社会信用代码: null,
						负责人: null,	
						联系电话: null,
						地址	: null,
						成立时间: null,
						从业人员数: null,	
						资质有效期开始时间: null,
						资质有效期结束时间: null,
						营业执照照片: [],
						安全生产责任书: [],
						是否有健康证: null,
						经营项目: null,
						消防重点关注对象: null,
						备注	: null,
						照片上传: null,
					}
				},
				params1: {
					检查点id: null
				},
				installList: [],
				status: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				roomStatus: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				status1: [{
						text: '是',
						value: '1'
					},
					{
						text: '否',
						value: '2'
					}
				],
				//表单验证规则
				rules: {
					餐饮店名称: {
						rules: [{
							required: true,
							errorMessage: '请输入餐饮店名称',
						}]
					},
					统一社会信用代码: {
						rules: [{
							required: true,
							errorMessage: '请输入社会信用代码',
						}]
					},
					负责人: {
						rules: [{
							required: true,
							errorMessage: '请输入经营者姓名',
						}, ]
					},
					联系电话: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						}, ]
					},
					房东姓名: {
						rules: [{
							required: true,
							errorMessage: '请输入房东姓名',
						}, ]
					},
					房东电话: {
						rules: [{
							required: true,
							errorMessage: '请输入房东电话',
						}, ]
					},
					地址: {
						rules: [{
							required: true,
							errorMessage: '请输入店铺地址'
						}]
					},
					消防重点关注对象: {
						rules: [{
							required: true,
							errorMessage: '请选择是否是消防重点对象',
						}]
						// rules: [{
						// 	required: true,
						// 	errorMessage: '请输入检查地点',
						// }, {
						// 	//字符串格式，反斜杠要转义\\  开头结尾/ /省略  new RegExp("\\w+") 相当于  /\w+/
						// 	pattern: '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
						// 	errorMessage: '身份证号码格式不正确',
						// }]
					},
					是否住人: {
						rules: [{
							required: true,
							errorMessage: '请选择是否住人',
						}, ]
					},
					资质有效期开始时间: {
						rules: [{
							required: true,
							errorMessage: '请填写经营资质有效期开始时间',
						}]
					},
					资质有效期结束时间: {
						rules: [{
							required: true,
							errorMessage: '请填写经营资质有效期结束时间',
						}]
					},
					是否有健康证: {
						rules: [{
							required: true,
							// format: 'string',
							errorMessage: '请选择是否有健康证',
						}]
					},
					是否有油烟净化: {
						rules: [{
							required: true,
							errorMessage: '请选择是否有油烟净化',
						}]
					}
					// 健康证编号: {
					// 	rules: [{
					// 		validateFunction: (rule, value, data, callback) => {
					// 			if (this.params.小餐饮店.是否有健康证 !== '1' || this.params.小餐饮店.健康证编号.length !== 0) {									
					// 				// 通过返回 resolve
					// 				callback()
					// 			} else {
					// 				// 不通过返回 reject(new Error('错误信息'))
					// 				callback('请添加健康证编号')
					// 			}
					// 		}
					// 	}]
					// }
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.params1.检查点id = +options.id
			this.params.id = +options.id
			this.getCheckPointInfo()
			// this.getInstallList()
			console.log('onload')
		},
		onShow() {
			console.log('onshow')
			// this.getCheckPointInfo()
			this.getInstallList()
		},
		created() {
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id
		},
		mounted() {
			that = this
		},
		computed: {
			...mapState(['personType'])
		},
		methods: {
			binddata(name,value){
			   // 通过 input 事件设置表单指定 name 的值
			   this.$refs.form.setValue(name, value)
			},
			resetParams() {
				// if(this.params.小餐饮店.是否有健康证 === '2') {
				// 	this.params.小餐饮店.健康证编号 = []
				// }
				// console.log(this.params.小餐饮店.是否有健康证)
			},
			handleClose(action) {
				if(action == 'confirm') {
					if(that.params.小餐饮店.健康证编号.length === 0) {
						uni.showToast({
							title: '请添加至少一个证件号',
							icon: 'none'
						})
						return
					}
					that.binddata('健康证编号', that.params.小餐饮店.健康证编号)
					that.showModal = false
					that.numItem = ''
				}else if(action == 'cancel') {
					that.showModal = false
					that.numItem = ''
					that.binddata('健康证编号', that.params.小餐饮店.健康证编号)
				}
				console.log(action)
			},
			addNumber() {
				if(this.numItem.trim() == '') {
					uni.showToast({
						title: '请输入健康证编号',
						icon: 'none'
					})
					return
				}
				this.params.小餐饮店.健康证编号.push(this.numItem)
				this.numItem = ''
			},
			deleteNum(index) {
				this.params.小餐饮店.健康证编号.splice(index, 1)
			},
			goEdit(id) {
				uni.navigateTo({
					url: '../installtionDetail/installtionDetail?id=' + id
				})
			},
			onDelete(id) {
				this.$common.showModal('确定要删除该设施吗?', this.deleteInstall, [id])
			},
			deleteInstall(id) {
				this.$http.post('gridSystem/device/delete', {id}).then(res => {
					if(res.code === 10000){
						uni.showToast({
							title: '删除成功'
						})
						this.getInstallList()
					}
				})
			},
			getInstallList() {
				this.$http.post('gridSystem/device/listWithoutAuth', this.params1).then(res => {
					console.log(res)
					if(res.code === 10000){
						this.installList = res.data.list
						if(res.data.list !== null) {
							this.hydrantList = res.data.list.filter(item => item.设施类型 === 'hydrant').slice(0,2)
							this.annihilatorList = res.data.list.filter(item => item.设施类型 === 'annihilator').slice(0,2)
							this.smokeList = res.data.list.filter(item => item.设施类型 === 'smokeDetector').slice(0,2)
							this.temperateList = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').slice(0,2)
							this.gasTankList = res.data.list.filter(item => item.设施类型 === 'gasTank').slice(0,2)
							this.hydrantLength = res.data.list.filter(item => item.设施类型 === 'hydrant').length
							this.annihilatorLength = res.data.list.filter(item => item.设施类型 === 'annihilator').length
							this.smokeLength = res.data.list.filter(item => item.设施类型 === 'smokeDetector').length
							this.temperateLength = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').length
							this.gasTankLength = res.data.list.filter(item => item.设施类型 === 'gasTank').length
						    return 
						}
							this.hydrantList = []
							this.annihilatorList = []
							this.smokeList = []
							this.temperateList = []
							this.gasTankList = []
							this.hydrantLength = 0
							this.annihilatorLength = 0
							this.smokeLength = 0
							this.temperateLength = 0
							this.gasTankLength = 0
					}
				})
			},
			goAddInstall() {
				uni.navigateTo({
					url: '../createInstallation/createInstallation?id=' + this.params.id + '&name=' + this.params.小餐饮店.餐饮店名称
				})
			},
			goMoreInstall() {
				if(this.personType == 1 && this.params.小餐饮店.联系电话 !== uni.getStorageSync('gridInfo').手机号) {
					uni.navigateTo({
						url: '../installationList/installationList?id=' + this.params.id + '&name=' + this.params.小餐饮店.餐饮店名称 + '&hidden=' + true
					})
					return
				}
				uni.navigateTo({
					url: '../installationList/installationList?id=' + this.params.id + '&name=' + this.params.小餐饮店.餐饮店名称
				})
			},
			getCheckPointInfo() {
				this.$http.post('gridSystem/checkPoint/info', this.params).then(res => {
					console.log(res)
					if(res.code === 10000){
						let phone = uni.getStorageSync('gridInfo').手机号
						if(this.personType == 1 && res.data.小餐饮店.联系电话 !== phone && res.data.小餐饮店.房东电话 !== phone) {
							this.isNoEdit = true
						}
						if(this.personType === 1) {
							this.status.forEach(item => {
								if(item.value !== res.data.小餐饮店.消防重点关注对象){
									item.disable = true
								}
							})
						}
						this.params = res.data
						this.params.小餐饮店.健康证编号 = this.params.小餐饮店.健康证编号 || []
						this.params.小餐饮店.资质有效期开始时间 = this.params.小餐饮店.资质有效期开始时间 && dayjs(this.params.小餐饮店.资质有效期开始时间).format('YYYY-MM-DD')
						this.params.小餐饮店.资质有效期结束时间 = this.params.小餐饮店.资质有效期结束时间 && dayjs(this.params.小餐饮店.资质有效期结束时间).format('YYYY-MM-DD')
						this.params.小餐饮店.成立时间 = this.params.小餐饮店.成立时间 && dayjs(this.params.小餐饮店.成立时间).format('YYYY-MM-DD')
					}
				})
			},
			getLocation(event) {
				this.params.lagitude = event.latitude
				this.params.longitude = event.longitude
				this.params.小餐饮店.地址 = event.address
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					console.log(this.value1, '值')
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					if(res.是否有健康证 === '2') {
						res.健康证编号 = []
					}
					res.成立时间 = res.成立时间 && dayjs(res.成立时间).format('YYYY-MM-DDTHH:mm:ssZ')
					res.资质有效期开始时间 = res.资质有效期开始时间 && dayjs(res.资质有效期开始时间).format('YYYY-MM-DDTHH:mm:ssZ')
					res.资质有效期结束时间 = res.资质有效期结束时间 && dayjs(res.资质有效期结束时间).format('YYYY-MM-DDTHH:mm:ssZ')
					if(res.资质有效期开始时间 && res.资质有效期结束时间) {
						let startTime = new Date(dayjs(res.资质有效期开始时间).format('YYYY-MM-DD')).getTime()
						let endTime = new Date(dayjs(res.资质有效期结束时间).format('YYYY-MM-DD')).getTime()
						if(startTime - endTime > 0) {
							uni.showToast({
								title: '资质有效期结束时间不得早于开始时间',
								icon: 'none'
							})
							return
						}
					}
					res.从业人员数 = res.从业人员数 && parseInt(res.从业人员数)
					// this.$emit('submit', Object.assign({},this.params,{小餐饮店: res}))
					this.editCheckPoint(Object.assign({}, this.params, {小餐饮店: res}))
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			editCheckPoint(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/checkPoint/update', params).then(res => {
					console.log(res)
					if(res.code === 10000){
						uni.showToast({
							title: '修改成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.color {
		color: #808080;
	}
	.install-container {
		padding-bottom: 90rpx;
	}
</style>
